<template>
  <a-card title="AI作业批改" :bordered="false">
    <div class="ai-correction-container">
      <div class="selection-section">
        <a-space :size="16">
    <a-select
      v-model:value="selectedHomework"
      style="width: 300px"
      placeholder="选择作业"
      @change="handleHomeworkChange"
            :loading="loadingHomework"
    >
      <a-select-option v-for="homework in homeworkList" :key="homework.id" :value="homework.id">
              {{ homework.title }} ({{ formatDate(homework.deadline) }})
      </a-select-option>
    </a-select>

          <a-select
            v-model:value="selectedClass"
            style="width: 200px"
            placeholder="选择班级"
            :disabled="!selectedHomework"
          >
            <a-select-option v-for="cls in classList" :key="cls.id" :value="cls.id">
              {{ cls.name }}
            </a-select-option>
          </a-select>

          <a-button
            type="primary"
            :disabled="!selectedHomework || !selectedClass"
            @click="startAICorrection"
            :loading="correcting"
          >
            <template #icon><robot-outlined /></template>
      开始AI批改
    </a-button>
        </a-space>
  </div>

      <a-divider />

      <div v-if="correctionInProgress" class="progress-section">
        <a-result title="AI正在批改作业" sub-title="请稍候...">
          <template #icon>
            <a-spin size="large" />
</template>
        </a-result>
        <a-progress :percent="progressPercent" :status="progressStatus" />
      </div>

      <div v-if="correctionResult" class="result-section">
        <a-result
          status="success"
          title="批改完成"
          :sub-title="`共批改 ${studentCount} 份作业，平均分 ${averageScore}`"
        >
          <template #extra>
            <a-space>
              <a-button type="primary" @click="viewCorrectionDetails">
                <template #icon><file-search-outlined /></template>
                查看详细报告
              </a-button>
              <a-button @click="exportCorrectionResult">
                <template #icon><export-outlined /></template>
                导出批改结果
              </a-button>
            </a-space>
          </template>
        </a-result>

        <a-divider orientation="left">批改统计</a-divider>

        <div class="stats-container">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-card title="分数分布" :bordered="false">
                <a-echarts :option="scoreDistributionChart" style="height: 300px" />
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card title="常见错误" :bordered="false">
                <a-list :data-source="commonErrors">
                  <template #renderItem="{ item }">
                    <a-list-item>
                      <a-tag color="red">{{ item.type }}</a-tag>
                      {{ item.count }}次
                    </a-list-item>
                  </template>
                </a-list>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card title="优秀作业" :bordered="false">
                <a-list :data-source="topStudents">
                  <template #renderItem="{ item }">
                    <a-list-item>
                      {{ item.name }} - {{ item.score }}分
                    </a-list-item>
                  </template>
                </a-list>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <!-- Correction Details Modal -->
    <a-modal
      v-model:visible="detailsModalVisible"
      title="详细批改报告"
      width="80%"
      :footer="null"
    >
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="summary" tab="汇总分析">
          <div class="report-summary">
            <h3>作业整体情况</h3>
            <p>{{ reportSummary.overview }}</p>

            <h3>知识点掌握情况</h3>
            <a-table
              :columns="knowledgeColumns"
              :data-source="reportSummary.knowledgePoints"
              :pagination="false"
            />
          </div>
        </a-tab-pane>
        <a-tab-pane key="students" tab="学生详情">
          <a-table
            :columns="studentColumns"
            :data-source="studentResults"
            row-key="id"
            :pagination="{ pageSize: 10 }"
          >
            <template #action="{ record }">
              <a-button type="link" @click="viewStudentDetails(record)">查看详情</a-button>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </a-card>
</template>

<script>
import { RobotOutlined, FileSearchOutlined, ExportOutlined } from '@ant-design/icons-vue'
// import { message } from 'ant-design-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'AICorrection',
  components: {
    RobotOutlined,
    FileSearchOutlined,
    ExportOutlined,
  },
  data() {
    return {
      selectedHomework: null,
      selectedClass: null,
      loadingHomework: false,
      correcting: false,
      correctionInProgress: false,
      correctionResult: false,
      progressPercent: 0,
      progressStatus: 'active',
      detailsModalVisible: false,
      activeTab: 'summary',
      homeworkList: [
        {
          id: 1,
          title: '数学作业 - 二次函数',
          deadline: '2023-12-15',
          totalStudents: 25,
    },
        {
          id: 2,
          title: '英语作业 - 阅读理解',
          deadline: '2023-12-10',
          totalStudents: 30,
    },
      ],
      classList: [
        { id: 'class1', name: '高一(1)班' },
        { id: 'class2', name: '高一(2)班' },
        { id: 'class3', name: '高一(3)班' },
      ],
      studentCount: 0,
      averageScore: 0,
      scoreDistributionChart: {
        tooltip: {
          trigger: 'item',
    },
        legend: {
          top: '5%',
          left: 'center',
  },
        series: [
          {
            name: '分数分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 5, name: '90-100分' },
              { value: 10, name: '80-89分' },
              { value: 6, name: '70-79分' },
              { value: 3, name: '60-69分' },
              { value: 1, name: '60分以下' },
            ],
          },
        ],
      },
      commonErrors: [
        { type: '计算错误', count: 23 },
        { type: '公式错误', count: 15 },
        { type: '概念混淆', count: 12 },
        { type: '审题不清', count: 8 },
      ],
      topStudents: [
        { id: 1, name: '张三', score: 98 },
        { id: 2, name: '李四', score: 96 },
        { id: 3, name: '王五', score: 95 },
      ],
      reportSummary: {
        overview: '本次作业整体表现良好，平均分达到82.5分。大部分学生掌握了二次函数的基本概念和应用，但在复杂问题的综合运用上仍需加强。',
        knowledgePoints: [
          { key: '1', point: '二次函数图像性质', mastery: '85%', commonError: '对称轴判断错误' },
          { key: '2', point: '顶点式应用', mastery: '78%', commonError: '顶点坐标计算错误' },
          { key: '3', point: '实际问题建模', mastery: '65%', commonError: '变量关系建立错误' },
        ],
      },
      knowledgeColumns: [
        { title: '知识点', dataIndex: 'point', key: 'point' },
        { title: '掌握率', dataIndex: 'mastery', key: 'mastery' },
        { title: '常见错误', dataIndex: 'commonError', key: 'commonError' },
      ],
      studentResults: [
        { id: 1, name: '张三', score: 98, status: '优秀' },
        { id: 2, name: '李四', score: 96, status: '优秀' },
        { id: 3, name: '王五', score: 95, status: '优秀' },
        { id: 4, name: '赵六', score: 88, status: '良好' },
        { id: 5, name: '钱七', score: 85, status: '良好' },
      ],
      studentColumns: [
        { title: '姓名', dataIndex: 'name', key: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
        { title: '分数', dataIndex: 'score', key: 'score', sorter: (a, b) => a.score - b.score },
        { title: '状态', dataIndex: 'status', key: 'status' },
        { title: '操作', key: 'action', slots: { customRender: 'action' } },
      ],
    }
  },
  methods: {
    formatDate(date) {
      return date
    },
    handleHomeworkChange(value) {
      this.selectedHomework = value
      this.selectedClass = null
      this.correctionResult = false
    },
    startAICorrection() {
      this.correcting = true
      this.correctionInProgress = true
      this.progressPercent = 0

      const timer = setInterval(() => {
        this.progressPercent += Math.floor(Math.random() * 10) + 5
        if (this.progressPercent >= 100) {
          clearInterval(timer)
          this.progressStatus = 'success'
          setTimeout(() => {
            this.correctionInProgress = false
            this.correctionResult = true
            this.correcting = false
            this.studentCount = 25
            this.averageScore = '82.5'
          }, 500)
        }
      }, 800)
    },
    viewCorrectionDetails() {
      this.detailsModalVisible = true
    },
    exportCorrectionResult() {
      ElMessage.success('批改结果导出成功')
    },
    viewStudentDetails(record) {
      console.log('查看学生详情:', record)
    },
  },
}
</script>

<style scoped>
.ai-correction-container {
  padding: 24px;
}

.selection-section {
  margin-bottom: 24px;
}

.progress-section {
  text-align: center;
  padding: 40px 0;
}

.result-section {
  margin-top: 24px;
}

.stats-container {
  margin-top: 24px;
}

.report-summary {
  padding: 16px;
}

.report-summary h3 {
  margin-top: 24px;
  color: #1890ff;
}

.report-summary p {
  margin-bottom: 16px;
}
</style>
